<template>
    <div ref="parent" class="gamemap">
        <!--画布-->
        <canvas ref="canvas" tabindex="0"></canvas>
        <!-- 新增属性tabindex="0" 可以获取用户操作 -->  
    </div>
     
</template>
<script>
import {GameMap} from "@/assets/scripts/GameMap" //导入GameMap类
import { ref ,onMounted } from 'vue'
import { useStore } from "vuex";
export default{ //默认导出
    setup(){ //在组件初始化时默认调用的一个函数， 返回一个对象
        const store = useStore();
        let parent = ref(null);//ref函数用于创建响应式对象
        let canvas = ref(null);
        onMounted(()=>{
            store.commit("updateGameObject",new GameMap(canvas.value.getContext('2d'),parent.value,store));
            
        });
        return{
            parent,
            canvas
        }
    }
}
</script>
<style scoped>
div.gamemap{
    width:100%; /**跟父元素等长 */
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

</style>
